<template>
  <div>
    <fixedheader title="订单详情页"></fixedheader>
    <div class="orderdetail" ref="orderdetail" :class="{'nofooter': !canShowFooter}">
      <div class="detail-wrap">
        <div class="order-info">
          <div class="order-state">
            <p><label>订单状态：</label><span class="text-red">{{statusDesc}}</span></p>
            <p v-if="order.type"><label>订单类型：</label><span>{{orderTypeDesc}}</span></p>
            <p><label>订单编号：</label><span>{{order.orderNo}}</span></p>
            <p><label>下单时间：</label><span>{{order.createAt | formatDate}}</span></p>
            <div v-if="order.refund">
              <p v-if="order.refund.userStage"><label>发起退款：</label><span>{{order.refund.userStage.createTime | formatDate}}</span></p>
              <p v-if="order.refund.userStage"><label>退款原因：</label><span>{{order.refund.userStage.desc}}</span></p>
              <p v-if="order.refund.auditStage && order.refund.auditStage.createTime"><label>审批退款：</label><span>{{order.refund.auditStage.createTime | formatDate}}</span></p>
              <p v-if="order.refund.auditStage"><label>审批备注：</label><span>{{order.refund.auditStage.desc}}</span></p>
              <p v-if="order.refund.finishStage"><label>退款成功：</label><span>{{order.refund.finishStage.createTime | formatDate}}</span></p>
            </div>
            <p v-if="order.receiverAt"><label>订单完成：</label><span>{{order.receiverAt | formatDate}}</span></p>
          </div>
        </div>
        <split v-if="order.express"></split>
        <div class="title" v-if="order.express">配送信息</div>
        <div class="delivery-info" v-if="order.express">
          <p v-if="isMime && !isVendingOrder"><label>收货地址：</label><span>{{order.express.expressAddress}}</span></p>
          <p v-if="isMime && todoDelivery"><label>售卖机兑换码：</label><span><strong>{{order.vendor.pickCode}}</strong></span></p>
          <p v-if="isMime"><label>收货人：</label><span>{{order.express.receiver}}</span></p>
          <p v-if="isMime && order.express.mobile"><label>联系方式：</label><span>{{order.express.mobile}}</span></p>
          <p v-if="order.remarks && !isVendingOrder"><label>用户留言：</label><span>{{order.remarks}}</span></p>
          <p v-if="order.express.expressNo"><label>快递单号：</label><span>{{order.express.expressNo}}</span></p>
          <p v-if="order.express.expressCompany"><label>快递公司：</label><span>{{order.express.expressCompany}}</span></p>
          <p v-if="order.express.deliverAt"><label>发货时间：</label><span>{{order.express.deliverAt | formatDate}}</span></p>
          <p><label>支付方式：</label><span>在线支付</span></p>
          <!-- <p><label>发票信息：</label><span>普通发票</span></p> -->
        </div>
        <split v-show="deliveryLog.length"></split>
        <div class="title" v-show="deliveryLog.length">发货记录</div>
        <div class="expressLog-list" v-show="deliveryLog.length">
          <div class="expressLog-item" v-for="(expressLog, index) in deliveryLog" :key="index">
            <i></i>
            <div class="msg-box">{{expressLog.remark}} <span v-if="expressLog.deliverNo">({{expressLog.deliverCompany}}单号：{{expressLog.deliverNo}})</span></div>
            <small>{{expressLog.operateTime | formatDate}}</small>
          </div>
        </div>
        <split v-show="order.type !== 6"></split>
        <div class="title" v-show="order.type !== 6">商品列表</div>
        <ul class="goods-info" v-show="order.type !== 6">
          <li class="good-item" v-for="product in order.products" @click.stop.prevent="showProductDetail(product)">
            <div class="item-img"><img :src="getThumbnail(product)" alt=""></div>
            <div class="item-info">
              <h3 class="title">{{product.name}}</h3>
            </div>
            <div class="item-pay">
              <p class="price">{{product.price | currency}}</p>
              <p class="nums">x{{product.count}}</p>
            </div>
          </li>
        </ul>
        <split></split>
        <div class="price-summary">
          <ul>
            <li>商品总额<span class="text-red">{{totalPrice | currency}}</span></li>
            <li>运费<span class="text-red">+ {{order.shipFee || 0 | currency}}</span></li>
            <li>优惠券<span class="text-red">- {{order.couponFee || 0 | currency}}</span></li>
            <li>折扣券<span class="text-red">- {{discountFee | currency}}</span></li>
            <li>金币抵扣<span class="text-red">- {{order.coinValue || 0 | currency}}</span></li>
            <li>商家折扣<span class="text-red">- {{order.discount || 0 | currency}}</span></li>
          </ul>
          <p class="total">
            实付金额：<strong class="text-red">{{order.totalFee | currency}}</strong>
          </p>
        </div>
      </div>
    </div>
    <div class="footer border-top-1px" v-show="canShowFooter">
      <div class="btn-group" v-show="loginUser && loginUser.userId === order.userId">
       <div class="button" v-if="order.status === 0 && !order.express && order.type !== 6" @click.stop.prevent="goFillAddress"><span class="btn-red">填写收货地址</span></div>
        <div class="button" v-else-if="order.status === 0" @click.stop.prevent="weixinPay"><span class="btn-red">支付</span></div>
        <div class="button" v-if="order.status === 0 && !rejectCancelOrder" @click.stop.prevent="cancelOrder"><span class="btn-white">取消订单</span></div>
        <div class="button" v-if="(order.status === 1 || order.status === 8) && !rejectCancelOrder" @click.stop.prevent="showRefund"><span class="btn-red">申请退款</span></div>
        <div class="button" v-if="order.status === 5" @click.stop.prevent="cancelRefund"><span class="btn-red">取消退款申请</span></div>
        <div class="button" v-if="order.status === 2" @click.stop.prevent="trackExpress"><span class="btn-white">查看物流</span></div>
        <div class="button" v-if="order.status === 2" @click.stop.prevent="confirmDelivery"><span class="btn-green">确认收货</span></div>
        <div class="button" v-if="order.status === 60"><span class="btn-white">看相似</span></div>
        <div class="button" v-if="order.status === 60"><span class="btn-orange">再次购买</span></div>
      </div>
    </div>
    <transition name="move">
      <div class="order-refund-wrap" v-show="showBox">
        <refund :order="order" ref="refund" @update="hideRefund"></refund>
      </div>
    </transition>
    <transition name="fade">
      <div class="list-mask" @click.stop.prevent="hideRefund" v-show="showBox"></div>
    </transition>
  </div>
</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll';
  import fixedheader from '@/components/fixedtoolbar/fixedheader';
  import split from '@/components/split/split';
  import refund from '@/components/order/refund';
  import {formatDate} from '@/common/js/date';
  import api from '@/api/api';
  import {pay} from '@/common/js/pay';

  export default {
    data() {
      return {
        showBox: false,
        order: {
          express: {}
        },
        mapStatus: ['待支付', '待发货', '待收货', '已完成', '已取消', '退款申请中', '退款中', '已退款', '退款失败'],
        paying: false,
        deliveryLog: [],
        loginUser: this.$store.getters.getUserInfo
      };
    },
    activated() {
      this.deliveryLog = [];
      this.fetchData();
      this.show();
    },
    deactivated() {
      this.hide();
      this.paying = false;
      this.deliveryLog = [];
    },
    updated() {
      setTimeout(() => {
        this._initScroll();
      }, 1500);
    },
    mounted() {
      this._initScroll();
    },
    computed: {
      statusDesc() {
        let todo = '';
        if (this.order.status === 1 || this.order.status === 2) {
          if (this.order.deliverStatus === 1) {
            todo = ' (部分发货)';
          } else if (this.order.deliverStatus === 2) {
            todo = ' (延迟发货)';
          }
        }
        if (this.order.type === 100 && this.order.status === 1) {
          return '出货成功';
        }
        return this.mapStatus[this.order.status] + todo;
      },
      trackExpressState() {
        if (this.order.status === 2) {
          return `https://m.kuaidi100.com/index_all.html?type=${this.order.express.expressCompany}&postid=${this.order.express.expressNo}`;
        }
        return '';
      },
      orderTypeDesc() {
        if (this.order.type === 3) {
          return '秒杀';
        } else if (this.order.type === 4) {
          return '团购';
        } else if (this.order.type === 5) {
          return '拍卖';
        } else if (this.order.type === 6) {
          return '充值订单';
        } else if (this.order.type === 7) {
          return '首单特惠';
        } else if (this.order.type === 8) {
          return '拼团';
        } else if (this.order.type === 9) {
          return '砍价订单';
        } else if (this.order.type === 10) {
          return '拼团直购';
        } else if (this.order.type === 100) {
          return '茶美售货机';
        }
        return '';
      },
      isVendingOrder() {
        return this.order.type === 100;
      },
      rejectCancelOrder() {
        if (this.order.vendor && this.order.vendor.status > 0) {
          return true;
        }
        let orderTypes = [6, 8, 100];
        return orderTypes.filter(o => o === this.order.type).length;
      },
      canShowFooter() {
        let status = this.order.status;
        let canShowStatus = [0, 1, 2, 5];
        let isOwner = this.loginUser && this.loginUser.userId === this.order.userId;
        let ignoreOrderType = (this.order.type === 8 || this.order.type === 6) && this.order.status === 1;
        return canShowStatus.filter(o => o === status).length && isOwner && !ignoreOrderType;
      },
      isMime() {
        var fromNotice = this.$route.query.from || '';
        if (fromNotice && fromNotice === 'notice') {
          return true;
        }
        return this.loginUser && this.loginUser.userId === this.order.userId;
      },
      todoDelivery() {
        return this.order.status > 0 && this.order.vendor && this.order.vendor.pickCode > 0 || false;
      },
      totalPrice() {
        if (this.order && this.order.type === 6) {
          return this.order.totalFee;
        }
        let products = (this.order && this.order.products) || [];
        let total = 0;
        products.forEach(o => {
          total += (o.price * o.count);
        });
        return total;
      },
      discountFee() {
        let coupons = this.order && this.order.coupons || [];
        let total = 0;
        coupons.forEach(o => {
          total += (o.percentFee || 0);
        });
        return total;
      }
    },
    filters: {
      formatDate(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
      }
    },
    methods: {
      fetchData() {
        let id = this.$route.params.id || '';
        if (!id) {
          this.$store.dispatch('openToast', '非法访问！');
          return;
        }
        api.getOrderDetail({ orderNo: id }).then(response => {
          this.order = response;
          this._initScroll();
          this._getDeliveryLog();
        }).catch(response => {
          this.$store.dispatch('openToast', '网络太忙，请稍候再试！');
          this.$router.back();
          return;
        });
      },
      _getDeliveryLog() {
        api.getDeliveryLog({
          orderNo: this.order.orderNo
        }).then(response => {
          if (response.result === 0) {
            this.deliveryLog = response.data;
          }
        }).catch((response) => {
          console.error(response);
        });
      },
      _initScroll() {
        // this.$nextTick(() => {
        //   if (!this.scroll) {
        //     this.scroll = new BScroll(this.$refs.orderdetail, {
        //       click: true
        //     });
        //   } else {
        //     this.scroll.refresh();
        //   }
        // });
      },
      showProductDetail(product) {
        if (this.order.type === 3) { // 秒杀
          this.$router.push({name: 'seckillDetail', params: {id: product.id}});
        } else if (this.order.type === 4) {  // 团购
          this.$router.push({name: 'groupbuyDetail', params: {id: product.id}});
        } else if (this.order.type === 5) {  // 拍卖
          this.$router.push({name: 'auctiondetail', params: {id: product.id}});
        } else if (this.order.type === 7) {  // 首单特惠
          this.$router.push({name: 'firstdetail', params: {id: product.id}});
        } else if (this.order.type === 8 || this.order.type === 10) {  // 8: 拼团, 10: 拼团直购
          this.$router.push({name: 'tuandetail', params: {id: product.id}, query: {tuanId: this.order.spreadId || ''}});
        } else if (this.order.type === 9) {  // 砍价订单
          this.$router.push({name: 'sharedetail', params: {id: product.id}, query: {shareId: this.order.spreadId || ''}});
        } else {
          this.$router.push({name: 'good', params: {id: product.id}});
        }
      },
      show() {
        this.$store.commit('HIDE_FOOTER');
      },
      hide() {
        this.$store.commit('SHOW_FOOTER');
      },
      back() {
        this.$router.back();
      },
      getThumbnail(item) {
        let icon = item.icon;
        if (icon) {
          return api.CONFIG.psCtx + icon + '?w=750&h=500&v=v2';
        } else {
          return api.CONFIG.defaultImg;
        }
      },
      cancelOrder() {
        // 如果是秒杀订单，先调秒杀接口取消秒杀成功数据，并退回商品库存。
        if (this.order.type === 3) {
          let userId = this.$store.getters.getUserInfo.userId;
          let seckillId = 0;
          let products = this.order.products || [];
          if (products.length) {
            seckillId = products[0].id;
          }
          api.cancelSeckillOrder({
            seckillId: seckillId,
            userId: userId
          }).then(response => {
            if (response.success) {
              this.$store.dispatch('removeKillProduct', seckillId);
              api.cancelOrder({
                orderNo: this.order.orderNo
              }).then(res => {
                if (res.result === 0) {
                  this.$store.dispatch('openToast', '订单已取消！');
                  this.$router.push('/order');
                } else {
                  this.$store.dispatch('openToast', '订单取消失败！');
                }
              });
            } else {
              this.$store.dispatch('openToast', '服务器忙，请稍候重试！');
            }
          });
        } else {
          api.cancelOrder({
            orderNo: this.order.orderNo
          }).then(response => {
            if (response.result === 0) {
              this.$store.dispatch('openToast', '订单已取消！');
              this.$router.push('/order');
            } else {
              this.$store.dispatch('openToast', '服务器忙，请稍候重试！');
            }
          });
        }
      },
      trackExpress() {
        this.$router.push({name: 'expresslog', params: {expressNo: this.order.express.expressNo, expressCode: this.order.express.expressCode || 'unknown'}});
      },
      goFillAddress() {
        this.$router.push({name: 'filladdress', params: {id: this.order.orderNo}});
      },
      weixinPay() {
        let userInfo = this.$store.getters.getUserInfo;
        if (!userInfo.openid) {
          this.$store.dispatch('openToast', '请先登录！');
          return;
        }
        if (this.paying) {
          this.$store.dispatch('openToast', '正在支付中...');
          return;
        }
        this.paying = true;
        let payParams = {
          totalFee: this.order.totalFee || 0,
          openid: userInfo.openid,
          orderNo: this.order.orderNo,
          body: this.order.title || this.order.products[0].name,
          orderId: this.order.id
        };
        api.wxpay(payParams).then((response) => {
          this.paying = false;
          let that = this;
          WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
              'appId': response.appId,
              'timeStamp': response.timeStamp || +new Date(),
              'nonceStr': response.nonceStr,
              'package': response.packageValue,
              'signType': response.signType || 'MD5',
              'paySign': response.paySign
            }, function(res) {
              // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
              if (res.err_msg === 'get_brand_wcpay_request:ok') {
                that.$store.dispatch('openToast', '支付成功！');
                if (that.order.type === '3') {
                  api.finishSeckill(that.order.products[0].id, that.order.orderNo);
                }
              } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
                that.$store.dispatch('openToast', '取消支付！');
                if (that.order.type === 8) {
                  // 拼团订单取消付款，删除拼团订单
                  api.deleteTuan(that.order.orderNo);
                }
              } else if (res.err_msg === 'get_brand_wcpay_request:fail') {
                that.$store.dispatch('openToast', '支付失败！');
              }
            }
          );
          pay();
        }).catch(response => {
          this.paying = false;
        });
      },
      hideRefund() {
        this.showBox = false;
      },
      showRefund() {
        this.showBox = true;
        this.$refs.refund.show();
      },
      cancelRefund() {
        api.cancelRefund({
          orderNo: this.order.orderNo
        }).then(response => {
          if (response.result === 0) {
            this.$store.dispatch('openToast', '退款申请已取消！');
            this.order.status = 1;
          } else {
            this.$store.dispatch('openToast', '网络太忙，请稍候再试！');
          }
        });
      },
      confirmDelivery() {
        api.confirmDelivery({
          orderNo: this.order.orderNo
        }).then(response => {
          if (response.result === 0) {
            this.$store.dispatch('openToast', '订单已完成，期待再会！');
            this.order.status = 3;
          } else {
            this.$store.dispatch('openToast', '网络太忙，请稍候再试！');
          }
        });
      }
    },
    components: {
      fixedheader, split, refund
    }
  };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import '../../common/stylus/mixin';
  .btn-red
    background: #f15353
    color: #f1f1f1
  .btn-blue
    background: #3a77e7
    color: #fff
  .btn-green
    background: #44b549
    color: #fff
  .btn-orange
    background: #f19325
    color: #fff
  .btn-white
    background: #fff
    color: #666
    border: 1px solid #ccc
  .orderdetail
    position: absolute
    top: 44px
    bottom: 50px
    width: 100%
    overflow: auto
    -webkit-overflow-scrolling: touch
    background-color: #fff
    &.nofooter
      bottom: 0
    .detail-wrap
      position: relative
      width: 100%
      padding-bottom: 30px
      >.title
        position: relative
        width: 100%
        height: 40px
        line-height: 40px
        font-size: 14px
        padding: 0 8px
        box-sizing: border-box
      .expressLog-list
        position: relative
        width: 100%
        padding: 0 15px 0 38px
        font-size: 12px
        line-height: 1.5
        box-sizing: border-box
        .expressLog-item
          position: relative
          padding: 10px 0
          color: #999
          &:after
            content: "\20"
            display: block
            width: 1px
            height: 100%
            background: #999
            position: absolute
            left: -20px
            top: 20px
          &:first-child
            color: #333
            i
              border-color: #fb8a00
              &:after
                background-color: #fb8a00
          &:last-child:after
            background: none
          i
            position: absolute
            left: -24px
            top: 13px
            display: block
            width: 8px
            height: 8px
            background: #fff
            border-radius: 8px
            border: 1px solid #999
            z-index: 1
            &:after
              position: absolute
              top: 50%
              left: 50%
              margin: -3px 0 0 -3px
              content: "\20"
              display: block
              width: 6px
              height: 6px
              background: #999
              border-radius: 6px
          .msg-box
            position: relative
          small
            font-size: 10px
            color: #999
      .order-info, .delivery-info, .goods-info, .price-summary
        padding: 10px 8px
        p
          line-height: 1.6
          font-size: 14px
          label
            display: inline-block
            min-width: 70px
            color: #999
          .text-blue
            color: #00a0dc
          .text-red
            color: #e4393c
      .delivery-info, .goods-info
        padding-top: 0
      .goods-info p
        line-height: 1
      .price-summary
        font-size: 14px
        padding-bottom: 20px
        ul
          position: relative
          padding-bottom: 15px
          li
            line-height: 1.8
            span
              float: right
        .total
          text-align: right
          strong
            font-weight: 700
            font-size: 16px
      .good-item
        position: relative
        display: flex
        font-size: 13px
        box-sizing: border-box
        .item-img
          display: inline-block
          float: left
          width: 35%
          img
            width: 95%
            overflow: hidden
        .item-info
          position: relative
          flex: 1
          padding: 8px 3px 0 2px
          box-sizing: border-box
          >.title
            position: relative
            font-size: 14px
            overflow: hidden
            text-overflow: ellipsis
            display: -webkit-box
            -webkit-line-clamp: 2
            -webkit-box-orient: vertical
            line-height: 1.3
            color: #666
          div
            padding-top: 10px
        .item-pay
          position: relative
          width: 50px
          float: right
          text-align: right
          padding-top: 8px
          .price
            padding-bottom: 8px
            color: #e4393c
            font-weight: 400
          .nums
            text-align: right
            color: #666
  .order-refund-wrap
    position: absolute
    left: 0
    top: auto
    bottom: 0
    z-index: 42
    width: 100%
    min-height: 300px
    max-height: 395px
    background: #fff
    transform: translate3d(0, 0, 0)
    overflow: hidden
    &.move-enter-active, &.move-leave-active
      transform: translate3d(0, 0, 0)
      transition: all 0.5s
    &.move-enter, &.move-leave-active
      transform: translate3d(0, 100%, 0)
  .list-mask
    position: fixed
    top: 0
    left: 0
    width: 100%
    bottom: 0
    z-index: 40
    transition: all 0.5s
    background: rgba(7, 17, 27, 0.6)
    &.fade-transition
      transition: all 0.5s
      opacity: 1
      background: rgba(7, 17, 27, 0.6)
    &.fade-enter-active, &.fade-leave-active
      opacity: 1
      background: rgba(7, 17, 27, 0.6)
    &.fade-enter, &.fade-leave-active
      opacity: 0
      background: rgba(7, 17, 27, 0)
  .footer
    border-top-1px(rgba(7, 17, 27, 0.1))
    position: fixed
    width: 100%
    padding: 0 8px 0 2px
    bottom: 0
    height: 50px
    box-sizing: border-box
    overflow: hidden
    background: #fff
    .btn-group
      position: relative
      font-size: 14px
      padding-top: 7.5px
      display: block
      width: 100%
      height: 100%
      box-sizing: border-box
      .button
        text-align: center
        float: right
        padding-right: 8px
        min-width: 74px
        box-sizing: border-box
        &:first-child
          padding-right: 0
        span
          box-sizing: border-box
          display: inline-block
          width: 100%
          height: 35px
          line-height: 35px
          padding: 0 8px
          border-radius: 3px
</style>
